Skip to content

feat(ui): added component playground & fixed training modal #2354

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
waleedlatif1 merged 1 commit into from
Dec 13, 2025
Merged

feat(ui): added component playground & fixed training modal #2354

waleedlatif1 merged 1 commit into from
Dec 13, 2025

Conversation

@waleedlatif1
Copy link
Collaborator

@waleedlatif1 waleedlatif1 commented Dec 13, 2025

Summary

  • added component playground & fixed training modal

Type of Change

  • New feature

Testing

N/A

Checklist

  • Code follows project style guidelines
  • Self-reviewed my changes
  • Tests added/updated and passing
  • No new warnings introduced
  • I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

@vercel
Copy link

vercel bot commented Dec 13, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Review Updated (UTC)
docs Skipped Skipped Dec 13, 2025 5:03am

@waleedlatif1 waleedlatif1 mentioned this pull request Dec 13, 2025
Merged
@waleedlatif1 waleedlatif1 merged commit 9c8d845 into staging Dec 13, 2025
6 checks passed
@waleedlatif1 waleedlatif1 deleted the fix/training branch December 13, 2025 05:05
@greptile-apps
Copy link
Contributor

greptile-apps bot commented Dec 13, 2025

Greptile Overview

Greptile Summary

This PR introduces two main changes:

  1. Component Playground: Added a new /playground route for showcasing EMCN UI components. The feature is properly gated behind NEXT_PUBLIC_ENABLE_PLAYGROUND environment variable.

  2. Training Modal Refactor: Restructured the copilot training UI by:

    • Deleting the TrainingControls wrapper component and TrainingFloatingButton
    • Moving training controls into the terminal header for a cleaner interface
    • Migrating TrainingModal from shadcn/ui Dialog to EMCN Modal components
    • Updating styling to use CSS variables consistent with the design system

The changes follow the project's established patterns for feature flagging and component architecture.

Confidence Score: 5/5

  • This PR is safe to merge - it adds a feature-flagged playground page and refactors existing training UI components with no breaking changes.
  • The changes are well-structured and follow project conventions. The playground feature is properly gated via environment variable, the training modal refactor maintains existing functionality while improving the component architecture, and all environment variable access follows established patterns.
  • No files require special attention.

Important Files Changed

File Analysis

Filename Score Overview
apps/sim/app/playground/page.tsx 5/5 New component playground page for showcasing EMCN UI components. Feature-flagged via NEXT_PUBLIC_ENABLE_PLAYGROUND env var. Properly uses notFound() for gating.
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx 5/5 Added playground link button and integrated training controls into terminal header. Features are properly gated via environment variables using useEffect checks on mount.
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/training-controls/training-modal.tsx 5/5 Migrated from shadcn/ui Dialog components to EMCN Modal components. Updated styling to use project CSS variables and precise pixel values as per style guide.
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx 5/5 TrainingModal now conditionally rendered based on store state. Simplified by removing TrainingControls wrapper in favor of direct modal rendering.
apps/sim/lib/core/config/env.ts 5/5 Added NEXT_PUBLIC_ENABLE_PLAYGROUND client env var with proper runtime env configuration for component playground feature flag.

Sequence Diagram

sequenceDiagram
    participant User
    participant Terminal
    participant TrainingModal
    participant CopilotTrainingStore
    participant Workflow

    Note over User,Workflow: Training Flow (Refactored)
    
    User->>Terminal: Click "Train Copilot" button
    Terminal->>CopilotTrainingStore: toggleModal()
    CopilotTrainingStore->>Workflow: showModal = true
    Workflow->>TrainingModal: Render modal
    
    User->>TrainingModal: Enter title & prompt
    User->>TrainingModal: Click "Start Training"
    TrainingModal->>CopilotTrainingStore: startTraining(title, prompt)
    
    Note over User,Workflow: User makes workflow edits...
    
    User->>Terminal: Click "Stop Training" button
    Terminal->>CopilotTrainingStore: stopTraining()
    CopilotTrainingStore->>TrainingModal: Dataset saved
Loading

greptile-apps[bot]
greptile-apps bot reviewed Dec 13, 2025
View reviewed changes
Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

8 files reviewed, no comments

Edit Code Review Agent Settings | Greptile

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@greptile-apps greptile-apps[bot] greptile-apps[bot] left review comments

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@waleedlatif1